<template>
  <div ref="editorRef" class="t_editor" :style="{ width: width ? `${width}px` : '100%' }"></div>
</template>

<script lang="ts" setup>
import WangEditor from 'wangeditor'
import { reactive } from 'vue'
import { onMounted, ref, onBeforeUnmount, watch } from 'vue'
import type { EditorInfo } from '../types'
import type Editor from 'WangEditor'



const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  zIndex: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 600
  },
  width: {
    type: Number,
    default: 0
  },
  focus: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:value'])
const editorRef = ref<HTMLElement | null>(null)
const isInitContent = ref<boolean>(false)
const content = reactive<EditorInfo>({
  html: '',
  text: ''
})
const instance = ref<Editor | null>(null)

watch(
  () => props.value,
  () => {
    initEditorContent(props.value, true)
  }
)
onMounted(() => {
  createEditor();
})
onBeforeUnmount(() => {
  if (!instance.value) return
  instance.value.destroy()
  instance.value = null
})

const createEditor = () => {
  instance.value = new WangEditor(editorRef.value)
  setEditorConfig()
  instance.value.create()
  initEditorContent(props.value)
}

const initEditorContent = (htmlStr: string, isFocus = false) => {
  if (!instance.value) return
  const editor: Editor = instance.value as Editor
  editor.config.focus = isFocus
  if (!htmlStr) return
  isInitContent.value = true
  editor.txt.html(htmlStr)
}


const setEditorConfig = () => {
  if (!instance.value) return
  const editor: Editor = instance.value as Editor
  // 设置编辑区域高度为 500px
  editor.config.height = props.height
  // 设计z-index
  editor.config.zIndex = props.zIndex
  // 取消自动 focus
  editor.config.focus = props.focus
  // 配置 onchange 回调函数
  editor.config.onchange = function (newHtml: string) {
    content.html = newHtml
    content.text = editor.txt.text()
    if (!isInitContent.value) {
      emit('update:value', content.html)
    }
    // 最后标记为 false
    isInitContent.value = false
    // emit('onChange', content.html, content.text)
  }
  // 配置触发 onchange 的时间频率，默认为 200ms
  editor.config.onchangeTimeout = 500 // 修改为 500ms
  // 配置菜单栏，删减菜单，调整顺序
  editor.config.menus = [
    'head',
    'bold',
    'fontSize',
    'fontName',
    'italic',
    'underline',
    'strikeThrough',
    'indent',
    'lineHeight',
    'foreColor',
    'backColor',
    'link',
    'list',
    // 'todo',
    'justify',
    'quote',
    // 'emoticon',
    // 'image',
    // 'video',
    // 'table',
    'code',
    'splitLine',
    'undo',
    'redo'
  ]
}
defineExpose({
  content
})
</script>
<style lang="less" scoped>
.t_editor {
  text-align: left;
  height: 100px;
}
</style>s